<template>
	<view class="launch-packbox fixed">
		<view class="absolute" style="display: none;" v-if="launchPageData && launchPageData.length">
			<image :src="launchPageData[0].image" @error="setErrorFun" @load="setLoadFun" mode=""></image>
		</view>
		
		<!-- app启动页轮播图 -->
		<view class="launch-content absolute" v-if="isHadLauchImg">
			<swiper class="launch-swipers absolute" :autoplay="true" :interval="3000" :duration="500" :circular="true">
				<swiper-item v-for="(item, index) in launchPageData" @click="gooGoodsPage(item, index)" :key="index">
					<image class="launch-swipers" :src="item.image" mode="" />
					<image class="absolute swiper-detail-btns" src="/static/apps/app-advert-btn.png" mode="" @click="gooGoodsPage(item, index)"></image>
				</swiper-item>
			</swiper>

			<view class="absolute launch-close" @click="setLaunchCloseFun">
				跳过<text class="time">{{ perImgShowTimes }} s</text> | 关闭
			</view>
		</view>
		
		<!-- app启动页logo -->
		<image v-else src="/static/apps/app-logo.png" class="launch-logo absolute-center" mode=""></image>
	</view>
</template>

<script>
	import store from '@/store';
	import { setAsyncFunWait, setJumpFunTo } from '@/setupproject/TOOLS_FUN';
	import { getHomeBannerApi } from '@/setupproject/INTERFACE.js';

	export default {
		name: "comLaunchPage",
		data() {
			return {
				timer: null,
				totalTimer: null,
				addTimes: 0,
				perImgShowTimes: 3,
				isHadLauchImg: false,
				launchPageData: [],
			};
		},
		computed: {
			commonConfigs() {
				return store.getters.commonConfigs || {};
			}
		},
		async created() {
			this.addTimes = 0;
			this.totalTimer = setInterval(() => {
				this.addTimes++;
				if(this.addTimes > 8) {
					clearInterval(this.timer);
					clearInterval(this.totalTimer);
					this.$emit('startupPageCloseFun');
				}
			}, 1000);
			this.getHomeBannerApi();
		},
		destroyed() {
			
		},
		methods: {
			gooGoodsPage(item, index) {
				this.$emit('startupPageCloseFun');
				return setJumpFunTo(item, index);
			},
			
			setErrorFun() {
				clearInterval(this.totalTimer);
				this.$emit('startupPageCloseFun');
			},
			
			// 跳过动画
			setLaunchCloseFun() {
				this.isHadLauchImg = false;
				clearInterval(this.timer);
				this.$emit('startupPageCloseFun');
			},
			
			// 获取轮播图
			async getHomeBannerApi() {
				const { data } = await getHomeBannerApi({
					scene: 6, // 启动页轮播图
					pack_name: this.commonConfigs.appPackageName,
					version: this.commonConfigs.appPackageVer,
					platform: uni.getSystemInfoSync().platform,
				});
				this.launchPageData = data && data.banner;
			
				await setAsyncFunWait(1200);
			
				if (!this.launchPageData.length) {
					clearInterval(this.totalTimer);
					this.$emit('startupPageCloseFun');
				}
			},
			
			async setLoadFun() {
				clearInterval(this.totalTimer);
				if(this.addTimes < 4) {
					let num = (4 - this.addTimes ? 4 - this.addTimes : 0) * 1000;
					await setAsyncFunWait(num);
				}
				this.setShowingFun();
			},
			
			async setShowingFun() {
				await (this.isHadLauchImg = true);
				this.perImgShowTimes = this.launchPageData.length * 3;
				clearInterval(this.timer);
				if (this.isHadLauchImg) {
					this.timer = setInterval(() => {
						this.perImgShowTimes--;
						if (!this.perImgShowTimes) {
							clearInterval(this.timer);
							this.$emit('startupPageCloseFun');
						}
					}, 1000);
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.launch-packbox {
		width: 100vw;
		height: 100vh;
		background: #000;
		z-index: 100000;
		left: 0;
		top: 0;
		.launch-content {
			width: 100%;
			height: 100%;
			.launch-swipers {
				width: 100%;
				height: 100%;
			}
			.swiper-detail-btns {
				width: 590rpx;
				height: 98rpx;
				left: 0;
				right: 0;
				bottom: 198rpx;
				margin: auto;
			}
			.launch-close {
				background: rgba(255, 255, 255, 0.2);
				border-radius: 30rpx;
				top: 166rpx;
				right: 36rpx;
				width: 224rpx;
				height: 62rpx;
				line-height: 62rpx;
				text-align: center;
				font-size: 26rpx;
				color: #fff;
				white-space: nowrap;
				.time {
					margin: 0 4rpx;
					color: #f94d05;
				}
			}
		}
		.launch-logo {
			width: 680rpx;
			height: 680rpx;
			transform: translateY(-48rpx);
		}
	}
</style>
